/**
 * 验证码组件:数据来自自家项目或三方接口，因此需要请求(注意跨域、代理、注意封装)
 * 注意：
 *  1、验证码的key值不适合写在当前组件自身state，因为当前组件可能被一个组件同时使用，产生key被覆盖
 *  2、子传父情况 --不能使用ref，可能会导致验证码与key值不匹配的情况
 *               --使用子传方法传参给父
 *                      子中：this.props.saveKey(res.data.key)
 *                      父中:state={}  <Captcha saveKey={this.saveKey}/>  saveKey = key=>{this.setState({key})}
 */
import React, { Component } from 'react';
import axios from '../http/axios'
import url from '../config/url'
class Captcha extends Component {
    /* 设置验证码的默认尺寸 */
    static defaultProps = {
        w: 120,
        h: 36
    }
    state = {}
    /* 取消axios请求 */
    source = axios.CancelToken.source()
    render() {
        return (
            <div>
                <img src={this.state.img} width={this.props.w} height={this.props.h} alt='验证码' title='点击刷新' onClick={this.loadCaptcha} />
            </div>
        );
    }
    componentDidMount() {
        this.loadCaptcha()
    }
    /* 请求网络，获取验证码信息 */
    loadCaptcha = () => {
        axios
            .get(url.CaptchaUrl, { cancelToken: this.source.token })
            .then(res => {
                this.setState(res.data)
                // 将key值传给父
                this.props.saveKey(res.data.key)
            })
            .catch(err => {
                console.log(err);
            })
    }
    /* 取消axios请求 */
    componentWillUnmount() {
        this.source.cancel()
    }
}

export default Captcha;
